<template>
  <div style="margin-top: 20px; text-align: right;margin-right: 25px">
    <el-button @click="toggleSelection()"  color="#7ec1ff" plain>批量删除</el-button>
  </div>
  <el-table
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column label="序号" width="80" property="index"/>
    <el-table-column label="用户"  width="200px" property="account"/>
    <el-table-column label="景区"  width="100px" property="scenic"/>
    <el-table-column label="状态"  width="100px" >
      <el-button   type="primary" >待支付</el-button>
    </el-table-column>
    <el-table-column label="姓名"  width="60px" property="name"/>
    <el-table-column label="地址"  width="60px" property="address"/>
    <el-table-column label="电话"  width="60px" property="phone"/>
    <el-table-column label="订单时间"  width="200px" property="ordertime"/>
    <el-table-column property="address" label="操作"  style="text-align: center">
      <el-popconfirm
          width="220"
          confirm-button-text="是"
          cancel-button-text="否"
          :icon="InfoFilled"
          icon-color="orange"
          title="确认取消"
      >
        <template #reference>
          <el-button >取消</el-button>
        </template>
      </el-popconfirm>
      <el-popconfirm
          width="220"
          confirm-button-text="是"
          cancel-button-text="否"
          :icon="InfoFilled"
          icon-color="orange"
          title="确认删除"
      >
        <template #reference>
          <el-button >删除</el-button>
        </template>
      </el-popconfirm>
    </el-table-column>
  </el-table>
  <div style="margin-top: 10px; float: right">
    <div style="margin: 5px">共1条数据</div>
    <el-pagination background layout="prev, pager, next" :total="10" />
  </div>


</template>

<script lang="ts" setup>
import { ref } from 'vue'
import {ElMessage, ElMessageBox, ElTable} from 'element-plus'
import { InfoFilled } from '@element-plus/icons-vue'

interface User {
  index: number
  account: string
  scenic: string
  name: string
  address: string
  phone: string
  ordertime: string
}

const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<User[]>([])
const toggleSelection = (rows?: User[]) => {
  if (rows) {
    rows.forEach((row) => {
      // TODO: improvement typing when refactor table
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      multipleTableRef.value!.toggleRowSelection(row, undefined)
    })
  } else {
    multipleTableRef.value!.clearSelection()
  }
}
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
}

const tableData: User[] = ref([
  {
    index: 1,
    account: '34523453@qq.com',
    scenic: '西安网红打开',
    name: '',
    address: '',
    phone: '',
    ordertime: '2024-06-20',
  },
])
</script>

<style scoped>

</style>